<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>意见反馈</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="40">
          <el-col :span="6">
           <el-date-picker
            v-model="timeRange.createtime"
            type="daterange"
            range-separator="至"
            start-placeholder="创建时间"
            end-placeholder="创建时间"
            value-format="yyyy-MM-dd"
          >

           </el-date-picker>
          </el-col>

          <el-col :span="4">
           <el-input
            placeholder="问题关键字"
            v-model="queryInfo.question"
            clearable
           >
           </el-input>
        </el-col>

        <el-col :span = "3">
          <el-select v-model="selecttype">
            <el-option v-for="ftypes in feedtypes" 
            :label="ftypes.name" 
            :key="ftypes.id"
            :value="ftypes.id"/>
          </el-select>
        
        </el-col>

        <el-col :span="4">
          <el-input
            placeholder="输入反馈人昵称或手机号"
            v-model="namemobile"
            clearable
           >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="queryfeedback()"
            ></el-button>
          </el-input>
        </el-col>


        <el-col :span = "3">
            <el-button type="primary" @click="handleToSetType"
            >反馈类型设置</el-button>
        </el-col>

      </el-row>

 <el-table :data="feedbackList" border stripe>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>

        <el-table-column label="反馈人昵称" prop="nickName"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>

        <el-table-column label="反馈时间" prop="createTime">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="反馈类型" prop="type"></el-table-column>
        <el-table-column label="反馈内容" prop="content"></el-table-column>

        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              size="mini"
              @click="getfeedback(scope.row.id)"
            ></el-button>

            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deletefeedback(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

     <el-dialog title="反馈信息" :visible.sync="showDialogVisible" width="50%">
      <div>
        <label for="nickName">反馈人 : {{ this.nowfeedback.nickName }}</label>
      </div>


      <div>
        <label for="phone">反馈人手机 : {{ this.nowfeedback.phone }}</label>

      </div>

      <div>
        <label for="type">反馈类型 : {{ this.nowfeedback.type }}</label>

      </div>
  
      <div>
        <label for="createTime">反馈时间 : {{ this.nowfeedback.createTime | dateFormatNoTime }}</label>

      </div>

      <div>
        <img v-if="this.src1!=''&&this.src1!=null" v-bind:src= "this.src1" alt="反馈图" width=200px height=200px>
        <img v-if="this.src2!=''&&this.src2!=null" v-bind:src= "this.src2" alt="反馈图" width=200px height=200px>
        <img v-if="this.src3!=''&&this.src3!=null" v-bind:src= "this.src3" alt="反馈图" width=200px height=200px>
      </div>
      <div>
        <label for="content">反馈内容 : {{ this.nowfeedback.content }}</label>

      </div>
      <el-divider></el-divider>
    <div v-if="state==0">
      <div>
        <el-upload
          class="avatar-uploader"
          action="string"
          :http-request="UploadImage"
          :auto-upload="true"
          name="file"
          :headers="header"
          :show-file-list="false"
          list-type="picture"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
        </el-upload>
      </div>

      <div>
         <el-input v-model="reply"  clearable
            @clear="clearreply"
          >

          </el-input>
    </div>
    <el-row :gutter="10">
        <h1 ></h1>
      </el-row>
      <el-row :gutter="10">
        <h1 ></h1>
      </el-row>
      <el-row :gutter="10">
        <h1 ></h1>
      </el-row>
      <el-row :gutter="10" type="flex" justify="center">
        <el-button type="primary" @click="replyMessage()"
          >添 加 回 复</el-button
        >
      </el-row>
      
      
    </div>

    <div v-else>
        <label for="reply">回复内容:</label>
        <p id="reply"  v-html="this.nowfeedback.reply"></p>
        <p id="updateyime">回复时间：{{ this.nowfeedback.lastUpdateTime | dateFormatNoTime}}</p>
    </div>


    </el-dialog>

  </div>
</template>

<script>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

  // const toolbarOptions = [
  //   ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  //   ["blockquote", "code-block"], // 引用  代码块
  //   [{ header: 1 }, { header: 2 }], // 1、2 级标题
  //   [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  //   [{ script: "sub" }, { script: "super" }], // 上标/下标
  //   [{ indent: "-1" }, { indent: "+1" }], // 缩进
  //   // [{'direction': 'rtl'}],                         // 文本方向
  //   [{ size: ["small", false, "large", "huge"] }], // 字体大小
  //   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  //   [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  //   [{ font: [] }], // 字体种类
  //   [{ align: [] }], // 对齐方式
  //   ["clean"], // 清除文本格式
  //   ["link", "image", "video"] // 链接、图片、视频
  // ];
  const toolbarOptions = [
    [ "image"] // 链接、图片、视频
  ];
export default {
  components:{
    quillEditor
  },

  data () {
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        question: '',
        createtime: null,

        pageSize: 10

      },
      // 时间起始
      timeRange: {
        createtime: null
      },
      nowfeedback: {},
      newfeedback: {},
      // 标签列表
      feedbackList: [],
      total: 0,
      showDialogVisible: false,
      newDialogVisible: false,
      namemobile:'',
      selecttype:'',
      feedtypes:[],
      state:0,
      src1:'',
      src2:'',
      src3:'',

      reply:this.value,
      quillUpdateImg: false,
      editorOption: {
          theme: "snow", // or 'bubble'
          placeholder: '编辑回复内容',

          modules: {
            toolbar: {
              container: toolbarOptions,
              // container: "#toolbar",
              handlers: {
                image: function(value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector(".avatar-uploader input").click();
                  } else {
                    this.quill.format("image", false);
                  }
                },

              }
            }
        },
    },
     serverUrl: "http://188.131.136.54:8090/api/minio/upload", // 这里写你要上传的图片服务器地址
     header: {
          token: window.sessionStorage.getItem('token')
     } // 有的图片服务器要求请求头需要有token
  }
},
  
  created(){
    // 加载页面时 加载一次数据
    this.getfeedbackList(1)
    this.getfeedtypes ()
  },
  methods:{
    async getfeedbackList (page) {
      const { data: res } = await this.$http.get('feedbacks/all/' + page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.feedbackList = res.data
   //   console.log(res.data)
      this.total = res.data.total
    },

    async getfeedtypes () {
      const { data: res } = await this.$http.get('feedtypes/alltype')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.feedtypes = res.data
      this.feedtypes.push({"id":0,"createtime":null,"name":"所有"})
      let ilength = this.feedtypes.length-1
      this.selecttype = this.feedtypes[ilength].id
      console.log(this.selecttype)
    },


    // 新增界面
    handleAddNewfeedback () {
      this.newDialogVisible = true
    },

    // 新增界面
    handleToSetType () {
        const vm = this;
        vm.$router.push({path: '/feedtypes'})
    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getfeedbackList(newPage)
    },

    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getfeedbackList(1)
    },

    // 根据条件 搜索问题信息
    async queryfeedback () {
      let startdate = this.timeRange.createtime[0]
      let enddate = this.timeRange.createtime[1]

      const { data: res } = await this.$http.post(
        'feedbacks/search',
        {
          'startdate': startdate,
          'enddate': enddate,
          "type":this.selecttype,
          "namemobile":this.namemobile}, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.feedbackList = []
      this.feedbackList = res.data
      this.total = this.feedbackList.length
    },

    //
    getfeedback (id) {
      // var { data: res } = await this.$http.get('feedbacks/look/' + id)
      // if (res.code !== 200) return this.$message.error('Error:' + res.message)

      for (let i = 0 ;i <this.feedbackList.length; i++){

        if (this.feedbackList[i].id == id){
            this.nowfeedback = this.feedbackList[i]
            this.reply = this.nowfeedback.reply
            this.state = this.nowfeedback.state

            this.src1=(this.nowfeedback.img||'').split("|")[0]
            this.src2=(this.nowfeedback.img||'').split("|")[1]
            this.src3=(this.nowfeedback.img||'').split("|")[2]


            break
        }

      }


      this.showDialogVisible = true
      
    },

    async updatefeedback () {
      const { data: res } = await this.$http.post(
        'feedbacks/update',
        { 'id': this.nowfeedback.id, 'question': this.nowfeedback.question, 'answer': this.nowfeedback.answer }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = false
      this.getfeedbackList(this.queryInfo.currentPage)
      // this.nowfeedback = res.data
      // console.log(res.data.records)
    },

    // 删除用户
    async deletefeedback (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该反馈, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('feedbacks/delete/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除标签成功')
      // 重新加载一次
      this.getfeedbackList(this.queryInfo.currentPage)
    },

    // 新增

    async insertfeedback () {
      const { data: res } = await this.$http.post(
        'feedbacks/insert',
        { 'question': this.newfeedback.question, 'answer': this.newfeedback.answer }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.newDialogVisible = false
      this.getfeedbackList(this.queryInfo.currentPage)
      // this.nowfeedback = res.data
      // console.log(res.data.records)
    },


    onEditorBlur() {
        //失去焦点事件
      },
    onEditorFocus() {
        //获得焦点事件
      },
    onEditorChange() {
        //内容改变事件
        this.$emit("input", this.reply);
      },
    // 富文本图片上传前
      beforeUpload() {
        // 显示loading动画
        this.quillUpdateImg = true;
      },

//:http-request 使用该指令， :on-success, :on-error 指令是不会触发的
      async UploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('kind', 0)
      formData.append('account', "admin")
      formData.append('type', 2)
      const { data: res } = await this.$http.post(
        'minio/upload',
        formData
      )
        if (res.code == 200) {
          console.log(res.data)
          // 获取光标所在位置
          let quill = this.$refs.myTextEditor.quill;
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.data.url);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
    },

    async UploadImageApi(formData){
      const { data: res } = await this.$http.post(
        'minio/upload',
        formData
      )
    },
 
      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code == 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.result.url);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false;
        this.$message.error("图片插入失败");
      },

      async replyMessage(){

        //showDialogVisible = false
        const { data: res } = await this.$http.post(
        'feedbacks/reply',
        { 'id': this.nowfeedback.id, 'reply': this.reply, 'admin_id': 2 }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.newDialogVisible = false
      this.showDialogVisible=false
      this.getfeedbackList(this.queryInfo.currentPage)

      },

      clearreply(){
        this.reply=''
      }



  },
  filters: {

  }
}
</script>

<style lang="less" scope>
</style>
